デザインツール「Framer」のアカウントを作成してみた
こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。
最近、チームメンバーに教えていただいた「Framer」というデザインツールを触り始めました。まずはアカウントを作ってデスクトップツールを立ち上げるぐらいまで触ってみたので、そのあたりまでで気になったことをまとめたいと思います。
Framerとは？
公式サイトでは下記のように記載されています。
Framer is an all-in-one tool that helps teams design every part of the product experience. Start in Framer and get to a functional output faster than ever—no code required.
デザインツールとしては Figma や Adobe XD も有名ですが、個人的にこのツールの素晴らしいところは「デザイン」と「コード」の距離が近いところにあると思っています。
Framerでは作成したデザインをReactのコンポーネントとしてアプリケーション側で取り込むことができたり、また、逆にアプリケーション側で実際に作成したコンポーネントをデザイン側に戻すこともできます。
また、Material UIなどのUIコンポーネントもインストールして利用することなどもできるようです。
方法としてはいくつかあるようで、下記の記事や公式ドキュメントでも解説されていました。今後は、こちらを参考にさせていただき実際に試していきたいなと思っています。
Framerの契約プラン
Framerの契約プランは2021年12月現在、下記に記載されている通り「Free」、「Pro」、「Enterprise」の3つです。
年次払いだと20%お得になるようですね。
ここでの注意点としては、前途の「Material UIなどのUIコンポーネントもインストールして利用する」ようなケースです。
NPMパッケージ利用については、公式ドキュメントには以下のような注意書きがあります。
This article refers to the legacy desktop app which will soon be deprecated. Learn more about the new desktop app for Windows and Mac
ここに記載のとおり、デスクトップアプリには「Legacy Desktop App」と「New Desktop App」が存在します。（丁度、現在は過渡期のようです）
また、NPMパッケージ利用は2021年12月現在は「Web」と「New Desktop App」がベータ利用可能、「Legacy Desktop App」で正式利用可能、という状態でした。
「Free」プランに「Desktop app」と記載があるのですが、これは「New Desktop App」を指しており、「Legacy Desktop App」の利用には「Pro」プランが必要となるので、ここは注意が必要です。
アカウントを作成してみる
では、早速アカウントを作成してみます。
「Sign up for free」や「Try for free」のリンクからフリーアカウントが作成できます。
アカウント作成は「Googleアカウント連携」または「直接入力」で作成できます。わたしはGoogleアカウント連携で作成しました。
チームにJoinするか聞かれることがある
アカウントを作成する際ですが、既存のFramerのチーム（詳しくは後述します）にJoinするか聞かれることがあります。
これは、以下の条件で表示されるようです。
- 自分が登録したメールのドメイン名と同じドメイン名で既に登録しているユーザがいる
- この登録ユーザが同一ドメインユーザに対して「チーム」への参加を推奨する設定になっている
今回わたしの所属しているチームメンバーの2名が先に「チーム」を作成していたので、2チームについて参加するか聞かれましたので、そのうち1チームに参加してみました。
ログイン後の状態
こうしてログインした結果、私は既に「チーム」に参加した状態でのログインとなりました。
赤枠で括った箇所が参加している「チーム」になります。
チームについて
ログイン後はメニュー下部の「Create or Join Team...」から、「チームの作成」か「既存チームへの参加」ができます。
この段階で作成できるのは「Free Team」、つまり「フリープラン」のチームになります。
注意すべき点としては、このとおり「チーム」と「契約状態」が1:1で紐づくということです。実際に、作成したチームの設定画面を開くと「Free Plan」のチームである旨が表示されています。
Pro Planにしたい場合は、このチームのプランをアップグレードする感じですね。
なお、チームの作成時にデフォルトのロールを「Viewer」にするか「Editor」にするか聞かれるのですが、こちらはまずは「Viewer」にしておくことをオススメします。
課金契約済みのチームに参加した場合
前述したとおり、私のチームメンバーが既に「チーム」を作成していたので、その「チーム」に参加しました。
この「チーム」と私の参加状態としては、以下のとおりです。
- この「チーム」は既に課金契約を行っている
- 私は「Editor」として「チーム」に追加された
公式の「Pricing」ページにある通り、「Pro」契約は「¥2,800 Editor/month」です。
ということで、自動的に次回の請求予定額は2名分の課金額となっていました。ここは一番注意すべき点かなと思いました。
勝手に課金額が増えないためには？
このようなケースが発生するのは、「チーム」で以下のような設定がされていた場合です。
- Team Settings > Permissions の設定が以下の通り
- Recommend Team の設定が有効になっている
- Default Role for New Team Members の設定が Join team as Editor になっている
チームの作成時にデフォルトのロールを「Viewer」にするか「Editor」にするか聞かれますので、ここは必ずデフォルトの「Viewer」にしておくことが重要そうです。
なお、「Recommend Team」についてはデフォルトで有効になるようですので、こちらは必要に応じてチーム作成後に設定し直しましょう。
チームに参加してきたユーザを課金対象から外したい
意図せずにチームにユーザが課金状態で参加してしまった場合には、チームの管理者がチーム設定画面から、下記2つのいずれかのメンバー管理をすることで課金対象から外すことが可能です。
- 「Remove from team」でメンバーから外す
- 「Editor」ではなく「Viewer」に変更する
これで、次回の請求予定額を元に戻すことができます。
Legacy Desktop Appにおける契約判定
「Framerの契約プラン」の項で記載した「Legacy Desktop App」についてです。
こちらは前述したとおり「Pro」以上の契約が必要なのですが、この契約判定は以下のようになるようでした。
- 「Free」プランのチームにしか所属していない場合
- 「Legacy Desktop App」でプロジェクト作成ができない
- 1つでも「Pro」以上のプランのチームに「Editor」以上で所属している
- 「Legacy Desktop App」でプロジェクト作成ができる
こちらも少し注意が必要ですね。
まとめ
以上、デザインツール「Framer」のアカウントを作成してみました。
アカウント作成、プラン契約後には色々と注意が必要そうなことがわかりました。今回アカウントの作成ができたので、今後は実際に色々と触ってみて、まとめていきたいと思います。
どなたかのお役に立てば幸いです。それでは！
